<template>
  <div :class="className"
       :style="{height:height,width:width}" id="eChart"/>
</template>

<script>
import echarts from 'echarts'
import elementResizeDetectorMaker from 'element-resize-detector'
require('echarts/theme/macarons') // echarts theme
require('echarts/map/js/china.js') // 中国地图
import resize from '@/components/mixins/resize'

// const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '480px'
    },
    chartData: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      chart: null,
      min: 0,
      max: 10000,
      valData: [
        {
          name: '黑龙江',
          value: 0
        },
        {
          name: '北京',
          value: 0
        },
        {
          name: '上海',
          value: 0
        },
        {
          name: '重庆',
          value: 0
        },
        {
          name: '浙江',
          value: 0
        },
        {
          name: '河北',
          value: 0
        },
        {
          name: '河南',
          value: 0
        },
        {
          name: '云南',
          value: 0
        },
        {
          name: '江苏',
          value: 0
        },
        {
          name: '辽宁',
          value: 0
        },

        {
          name: '湖南',
          value: 0
        },
        {
          name: '安徽',
          value: 0
        },
        {
          name: '山东',
          value: 0
        },
        {
          name: '新疆',
          value: 0
        },
        {
          name: '江苏',
          value: 0
        },

        {
          name: '江西',
          value: 0
        },
        {
          name: '湖北',
          value: 0
        },
        {
          name: '广西',
          value: 0
        },
        {
          name: '甘肃',
          value: 0
        },
        {
          name: '山西',
          value: 0
        },
        {
          name: '内蒙古',
          value: 0
        },
        {
          name: '陕西',
          value: 0
        },
        {
          name: '吉林',
          value: 0
        },
        {
          name: '福建',
          value: 0
        },
        {
          name: '贵州',
          value: 0
        },
        {
          name: '广东',
          value: 0
        },
        {
          name: '青海',
          value: 0
        },
        {
          name: '西藏',
          value: 0
        },
        {
          name: '四川',
          value: 0
        },
        {
          name: '宁夏',
          value: 0
        },
        {
          name: '海南',
          value: 0
        },
        {
          name: '台湾',
          value: 0
        },
        {
          name: '香港',
          value: 0
        },
        {
          name: '澳门',
          value: 0
        }
      ]
    }
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val)
      }
    }
  },
  mounted() {
    const that = this
    var echart = document.getElementById('eChart')
    this.$nextTick(() => {
      this.initChart()
    })
    var erd = elementResizeDetectorMaker()
    erd.listenTo(echart, function() {
      that.$nextTick(function() {
        echarts.init(echart).resize()
      })
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const data = this.chartData || this.valData
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(data)
    },
    setOptions(chartData) {
      const data = chartData
      const yData = []
      const barData = []
      for (var i = 0; i < 10; i++) {
        barData.push(data[i])
        yData.push(i + data[i].name)
      }

      this.chart.setOption({
        title: [
          {
            show: true,
            text: '出库地区排名',
            textStyle: {
              color: '#2D3E53',
              fontSize: 18
            },
            right: 240,
            top: 20
          }
        ],
        tooltip: {
          show: true,
          formatter: function(params) {
            return params.name + '：' + params.data['value']
          }
        },
        visualMap: {
          type: 'continuous',
          orient: 'horizontal',
          itemWidth: 10,
          itemHeight: 80,
          text: ['高', '低'],
          showLabel: true,
          seriesIndex: [0],
          min: this.min,
          max: this.max,
          inRange: {
            color: ['#6FCF6A', '#FFFD64', '#FF5000']
          },
          textStyle: {
            color: '#7B93A7'
          },
          bottom: 30,
          left: 30
        },
        grid: {
          right: 10,
          top: 60,
          bottom: 30,
          width: '20%'
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          inverse: true,
          nameGap: 16,
          axisLine: {
            show: false,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ddd'
            }
          },
          axisLabel: {
            interval: 0,
            margin: 85,
            textStyle: {
              color: '#455A74',
              align: 'left',
              fontSize: 14
            },
            rich: {
              a: {
                color: '#fff',
                backgroundColor: '#FAAA39',
                width: 20,
                height: 20,
                align: 'center',
                borderRadius: 2
              },
              b: {
                color: '#fff',
                backgroundColor: '#4197FD',
                width: 20,
                height: 20,
                align: 'center',
                borderRadius: 2
              }
            },
            formatter: function(params) {
              if (parseInt(params.slice(0, 1)) < 3) {
                return [
                  '{a|' +
                    (parseInt(params.slice(0, 1)) + 1) +
                    '}' +
                    '  ' +
                    params.slice(1)
                ].join('\n')
              } else {
                return [
                  '{b|' +
                    (parseInt(params.slice(0, 1)) + 1) +
                    '}' +
                    '  ' +
                    params.slice(1)
                ].join('\n')
              }
            }
          },
          data: yData
        },
        geo: {
          // roam: true,
          map: 'china',
          left: '150',
          right: '50%',
          //   layoutSize: '50%',
          label: {
            emphasis: {
              show: false
            }
          },
          itemStyle: {
            emphasis: {
              areaColor: '#fff464'
            }
          }
        },
        series: [
          {
            name: 'mapSer',
            type: 'map',
            roam: false,
            geoIndex: 0,
            label: {
              show: false
            },
            data: data
          },
          {
            name: 'barSer',
            type: 'bar',
            roam: false,
            visualMap: false,
            zlevel: 2,
            barMaxWidth: 8,
            barGap: 0,
            itemStyle: {
              normal: {
                color: function(params) {
                  // build a color map as your need.
                  var colorList = [
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color: '#FFD119' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#FFAC4C' // 100% 处的颜色
                        }
                      ]
                    },
                    {
                      colorStops: [
                        {
                          offset: 0,
                          color: '#00C0FA' // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: '#2F95FA' // 100% 处的颜色
                        }
                      ]
                    }
                  ]
                  if (params.dataIndex < 3) {
                    return colorList[0]
                  } else {
                    return colorList[1]
                  }
                },
                barBorderRadius: 15
              }
            },
            data: barData
          }
        ]
      })
    }
  }
}
</script>
